<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title></title>
</head>
<body>
    <!-- 
        el与data的2种写法：
            1.el的2种写法：
                (1). new Vue实例时指定el属性
                (2). 先创建Vue实例，随后通过vm.$mount("xxx")指定el的值
            2.data有2种写法：
                (1). 对象式
                (2). 函数式：使用组件时必须使用函数式，否则会报错
            3.一个重要的原则：使用Vue管理的函数，一定不要写成箭头函数()=>{}形式，否则this就不再是Vue实例了
    -->
    <div id="root">
        <h1>Hello, {{address}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        const v = new Vue({
            // el第一种写法
            // el: "#root", 
            // data的第一种写法：对象式
            // data: {
            //     name: "LittleAnt",
            //     address: "广州"
            // }
            // data的第二种写法：函数式。当使用组件时，必须使用函数式
            data(){
                return{
                    name: "LittleAnt",
                    address: "广州"
                }
            }
        })
        v.$mount("#root"); // el的第二种写法
    </script>
</body>
</html>